<template>
  <nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
    <div class="aui-navbar__header">
      <h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
        <a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>
        <a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
      </h1>
    </div>
    <div class="aui-navbar__body">
        <div class="open">
            <span class="el-icon-s-fold"   v-if="!isCollapse" @click="changeMenu()"></span>
            <span class="el-icon-s-unfold"  v-else  @click="changeMenu()"></span>
        </div>
      <el-menu class="custom_item aui-navbar__menu mr-auto" mode="horizontal" @select="handleSelect">
        <el-menu-item v-show="menu.show" v-for="(menu, index) in $store.state.sidebarMenuList" :index="String(index)" :key="index">
          {{ menu.name }}
        </el-menu-item>
      </el-menu>
      <!--      <el-menu class="aui-navbar__menu mr-auto" mode="horizontal">-->
      <!--        <el-menu-item index="1">-->
      <!--          <el-input placeholder="请输入搜索内容" v-model="$store.state.sidebarMenuIndex" class="input-with-select">-->
      <!--            <el-button slot="append" icon="el-icon-search"></el-button>-->
      <!--          </el-input>-->
      <!--        </el-menu-item>-->
      <!--      </el-menu>-->
      <el-menu class="aui-navbar__menu" mode="horizontal">
        <el-menu-item index="5">
          <span>当前猪场：{{tenantName}}</span>
        </el-menu-item>
        <el-menu-item index="3" @click="fullscreenHandle()">
          <svg class="icon-svg aui-navbar__icon-menu" v-if="!isFullScreen" aria-hidden="true">
            <use xlink:href="#icon-fullscreen"></use>
          </svg>
          <svg class="icon-svg aui-navbar__icon-menu" v-if="isFullScreen" aria-hidden="true">
            <use xlink:href="#icon-fullscreen-exit"></use>
          </svg>
        </el-menu-item>
        <el-menu-item index="4" class="aui-navbar__avatar">
          <el-dropdown placement="bottom" :show-timeout="0">
            <span class="el-dropdown-link">
<!--              <img src="~@/assets/img/avatar.png">-->
              <span>{{ $store.state.user.mobile }}</span>
              <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="switchFarm()">切换猪场</el-dropdown-item>
              <el-dropdown-item @click.native="goIot()">IOT平台</el-dropdown-item>
              <el-dropdown-item @click.native="updatePasswordHandle()">{{
                  $t('updatePassword.title')
                }}
              </el-dropdown-item>
              <el-dropdown-item @click.native="logoutHandle()">{{ $t('logout') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
    <el-dialog title="提示" :visible.sync="dialogVisible" append-to-body>
      <el-button style="margin-bottom: 10px;" type="primary" v-for="item in tenants" :key="item.tenantId" @click="switchFarmRequest(item.tenantId)">{{ item.tenantName }}</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </nav>
</template>

<script>
/* eslint-disable */
import {messages} from '@/i18n'
import screenfull from 'screenfull'
import UpdatePassword from './main-navbar-update-password'
import {clearLoginInfo} from '@/utils'
import Cookies from "js-cookie";

export default {
    props: ['isCollapse'],
  inject: ['refresh'],
  data() {
    return {
      i18nMessages: messages,
      updatePassowrdVisible: false,
      dialogVisible: false,
      tenants: [],
      mobile: '',
      isFullScreen: false
    }
  },
  created() {
    this.$store.state.sidebarMenuIndex = 0
    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
    this.mobile = Cookies.get('mobile')
    this.tenantName = Cookies.get('tenantName')
    this.getTenants(this.mobile);
  },
  components: {
    UpdatePassword
  },

  methods: {
      changeMenu(){
          this.$emit("changeShow")
      },
    handleSelect(key, keyPath) {
      this.$store.state.sidebarMenuIndex = key
      //this.$forceUpdate()
    },
    // 全屏
    fullscreenHandle() {
      if (!screenfull.enabled) {
        return this.$message({
          message: this.$t('fullscreen.prompt'),
          type: 'warning',
          duration: 500
        })
      }
      screenfull.toggle()
      this.isFullScreen = !this.isFullScreen
    },
    getTenants(mobile) {
      return this.$http.get('/tenants?mobile=' + mobile).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        window.SITE_CONFIG['tenants'] = res.data
        this.tenants = res.data
      }).catch(() => {
      })
    },
    switchFarm() {
      this.dialogVisible = true;
    },
    goIot() {
      window.location.href = Cookies.get('url')
    },
    switchFarmRequest(tenantId) {
      var that = this
      this.$http.post(`/switchfarm?tenantId=` + tenantId).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        Cookies.set('token', res.data.token)
        Cookies.set('tenantName', res.data.tenantName)
        Cookies.set('url', res.data.url)
        that.$router.replace({ name: 'home' })
        location.reload()
      }).catch(() => {
      })
    },
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init()
      })
    },
    // 退出
    logoutHandle() {
      this.$confirm(this.$t('prompt.info', {'handle': this.$t('logout')}), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$http.post('/logout').then(({data: res}) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          clearLoginInfo()
          this.$router.push({name: 'login'})
        }).catch(() => {
        })
      }).catch(() => {
      })
    }
  }
}
</script>
<style scoped>
.open {
    color: #ffffff;
    line-height: 50px;
    font-size: 20px;
    cursor:pointer;
}
</style>
